<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      :label-width="$i18n.locale === 'en-US' ? '150px' : '120px'"
    >
      <el-form-item label="申请奖金" prop="bonusListId">
          <el-select
            style="width: 500px;"
            v-model="dataForm.bonusListId"
            filterable
            clearable
            placeholder="请选择奖金"
          >
            <el-option
              v-for="item in bonusList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="申请理由" prop="applyingReasons">
        <el-input
          v-model="dataForm.applyingReasons"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 20}"
          style="width: 800px;"
          placeholder="奖金申请理由"
        ></el-input>
      </el-form-item>
      <el-form-item label="申请文件" prop="fileUrls">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :headers="headers"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="5"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :on-success="handleSuccess"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传5个文件</div>
        </el-upload>
      </el-form-item>
      <div style="text-align: center;">
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </div>
    </el-form>
  </el-card>
</template>

<script>
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
export default {
  data() {
    return {
      uploadUrl: window.SITE_CONFIG["apiURL"] + "/piclocal/upload/pic",
      headers: { token: Cookies.get("token") },
      visible: false,
      dataForm: {
        bonusListId: "",
        applyingReasons: "",
        fileUrls: "",
      },
      fileList: [],
      bonusList: []
    };
  },
  computed: {
    dataRule() {
      return {
        bonusListId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        applyingReasons: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  created() {
    this.listBonus();
  },
  methods: {
    listBonus() {
      this.$http.get("/bonus/bonuslist/list").then(({ data }) => {
        this.bonusList = data.data;
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
      console.log(this.fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(res, file) {
      console.log(res);
      console.log(file);
      this.fileList.push(file);
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.dataForm.fileUrls = this.fileList
            .map((file) => file.response.data.imgAddress)
            .join(",");
          this.$http
            .post("/bonus/bonusprocess/", this.dataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.$router.replace({ name: "home" });
                },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      { leading: true, trailing: false }
    ),
  },
};
</script>
  